<template>
<div class="pending-task title-block">
  <div class="title-block-title">我的工作</div>
  <div class="title-block-content">
    <tab-panel class="pending-task-tab" :tab-list="tabList">
      <div class="list-panel" slot="first" slot-scope="scope" >
        <pending-task-list :tab-data="scope.tab"></pending-task-list>
      </div>
      <div class="list-panel" slot="second" slot-scope="scope">
        <pending-task-list :tab-data="scope.tab"></pending-task-list>
      </div>
       <div class="list-panel" slot="third" slot-scope="scope">
        <pending-task-list :tab-data="scope.tab"></pending-task-list>
      </div>
       <div class="list-panel" slot="fourth" slot-scope="scope">
        <pending-task-list :tab-data="scope.tab"></pending-task-list>
      </div>
       <div class="list-panel" slot="fifth" slot-scope="scope">
        <pending-task-list :tab-data="scope.tab"></pending-task-list>
      </div> 
      
    </tab-panel>
  </div>
</div>
</template>

<style lang="scss" scoped>

.pending-task{
  .pending-task-tab{
    /deep/ .el-tabs__item{
      line-height:30px;
      height: 30px;
    }
  }
  .list-panel{
    height: 100%;
    & > div{
      height: 100%;
    }
  }
}

</style>

<script>
import TabPanel from '../common/tab-panel.vue'
import PendingTaskList from './pending-task-list'
export default {
  name: 'pendingTask',
  components: {
    TabPanel,
    PendingTaskList
  },
  props: {
  },
  data() {
    return {
      tabList: [
        { label: '应办/未办', name: 'first' },
        { label: '应采/未采', name: 'second' },
        { label: '工作指令', name: 'third' },
        { label: '预警布控', name: 'fourth' },
        { label: '录比反', name: 'fifth' }
      ]
    }
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

